<!-- 用户云钱包 -->
<template>
  <view class="wallet-page">
    <view style="width: 80%; margin: 60rpx auto" class="font36">
      <view style="color: #626e7c">Hello </view>
      <view style="color: #354154">Welcome to Shangde Cloud</view>
      <view style="color: #354154">Account 2.0</view>
    </view>

    <view class="flex align-center">
      <view class="card-left"></view>
      <view class="card-middle" @click="getStatus(bankCardList[0].type)">
        <view class="flex align-center">
          <view class="m-r-20">
            <image :src="bankCardList[0].logo" style="width: 98rpx; height: 98rpx"></image>
          </view>
          <view>
            <view class="font36" style="font-weight: bold">{{ bankCardList[0].title }}</view>
            <view class="font24">{{ bankCardList[0].subtitle }}</view>
          </view>
        </view>

        <view class="justify-b">
          <view>
            <text v-if="bankCardList[0].isopen != 0">余额：{{ bankCardList[0].money || 0 }}</text>
          </view>
          <view>
            <text v-if="bankCardList[0].isopen == 0">去开通<text class="cuIcon-right"></text></text>
            <text v-else>去充值<text class="cuIcon-right"></text></text>
          </view>
        </view>
      </view>
      <view class="card-right"></view>
    </view>

    <!-- <view class="bankCard bg-gradual-red margin-top animation-slide-left" :style="`animation-delay: 0.${index}s`" v-for="(item, index) in bankCardList" :key="index" :class="[item.color]">
      <view class="bankCard-title">
        <view class="cu-avatar round lg" :style="`background-image:url(${item.logo})`"></view>
        <view class="margin-left position"
          >{{ item.title }}<view class="subtitle">{{ item.subtitle }}</view></view
        >
      </view>

      <view class="bankCard-content">
        <view>
          <text v-if="item.isopen != 0">余额：{{ item.money }}</text>
        </view>
        <view v-if="item.isopen == 0" @tap="getStatus(item.type)">去开通<text class="cuIcon-right"></text></view>
        <view v-else @tap="getStatus(item.type)">去充值<text class="cuIcon-right"></text></view>
      </view>
    </view> -->
  </view>
</template>

<script>
var app = getApp()
import { debouncePlus } from '@/util/index.js'
export default {
  data() {
    return {
      bankCardList: [
        // {
        //   title: '汇付天下',
        //   subtitle: '5天免费试用,大额支付更畅通,免费开通,提现免费',
        //   color: 'bg-gradual-red'
        // }
      ],
      token: ''
    }
  },
  onLoad(options) {
    if (options.token) {
      this.token = options.token
    }
    this.initData()
  },
  methods: {
    initData() {
      if (this.token) {
        this.setlogin()
      } else {
        this.getCardList()
      }
    },
    setlogin() {
      let that = this
      app.post('ApiIndex/logintogether', { gtksession: that.token }, function (res) {
        uni.setStorageSync('login_token', res.login_token)
        that.getCardList()
      })
    },
    getCardList() {
      let that = this
      app.post('api.CloudAccount/getCloudList', {}, function (res) {
        if (res.status == 0) {
          that.bankCardList = res.data
          that.bankCardList[0].color = 'bg-gradual-blue'
          that.bankCardList[0].subtitle = '商家收款可能有延迟，预计10分钟内到账'
        }
      })
    },
    getStatus: debouncePlus(
      function (...args) {
        this.getStatusUrl(...args)
      },
      1000,
      true
    ),
    getStatusUrl(type) {
      app.post('api.CloudAccount/getStatus', { type, return_url: '/userCloudWallet.php' }, function (res) {
        if (res.status == 0) {
          window.location.href = res.data
        }
      })
    }
  }
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
// 导入colorUI
@import '/static/css/colorui/main.css';
@import '/static/css/colorui/icon.css';
@import '/static/css/colorui/animation.css';
.wallet-page {
  width: 100%;
  .bankCard {
    width: 100%;
    height: 320upx;
    background-color: blue;
    border-radius: 30upx;
    padding: 30upx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-title {
      display: flex;
      align-items: center;
      font-size: 32upx;
      .position {
        position: relative;
        .subtitle {
          font-size: 26upx;
          position: absolute;
          top: 40upx;
          width: 500upx;
        }
      }
    }
    &-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 36upx;
    }
  }
}

.card-left {
  width: 30rpx;
  height: 290rpx;
  border-radius: 0 43rpx 43rpx 0;
  background-color: #d9ecff;
}
.card-middle {
  flex: 1;
  margin: 0 22rpx;
  border-radius: 43rpx;
  height: 344rpx;
  background-color: #5073fe;
  padding: 42rpx 30rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-right {
  width: 30rpx;
  height: 290rpx;
  border-radius: 43rpx 0 0 43rpx;
  background-color: #fcdcdc;
}
</style>
